<!--
 * @Description: 预渲染表格数据行
 * @version:
 * @Author: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="icr-preRenderRow">
    <div
      v-for="(item, idx) in rData"
      :key="idx"
      class="icr-preRenderRow-cell"
      :style="{ width: item.width + 'px' }"
    >
      <template v-if="item.val">
        <template v-if="item.dictValue == 'yx-ysjl'">
          <div
            v-for="(item2, index2) in item.val.split(item.splicer)"
            :key="index2"
          >
            {{ item2 }}
          </div>
        </template>
        <template v-else>
          <div
            v-for="(item2, index2) in item.val.split(';')"
            :key="index2"
            style="width: 100%"
          >
            {{ item2 }}
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PreRenderRow',
  props: {
    rData: {
      type: Array,
      default: () => []
    }
  }
})
</script>

<style lang="scss" scoped>
.icr-preRenderRow {
  box-sizing: border-box;
  display: block;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  font-size: 0;
  white-space: nowrap;
  vertical-align: top;
}

.icr-preRenderRow-cell {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  padding: 5px 0;
  min-height: 1.5em;
  border-right: 1px solid #000;
  font-size: 12px;
  line-height: 1.25;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: top;
  text-align: center;
}
</style>
